<template>
  <div>
    <h2 class="titleblue">{{title}}</h2>
    <div class="detail-content">
      <el-form ref="form" :model="form" label-width="110px">
        <div class="item-container">

          <el-form-item label="中文船名" class="row-item">
            <el-input v-model="form.shipName" class="form-item-width" :disabled="itemDisable"></el-input>
          </el-form-item>

          <el-form-item class="row-item" label="英文船名">
            <el-input v-model="form.shipNameEn" class="form-item-width" :disabled="itemDisable"></el-input>
          </el-form-item>

          <el-form-item class="row-item" label="IMO编号">
            <el-input v-model="form.imo" class="form-item-width" :disabled="itemDisable"></el-input>
          </el-form-item>

          <el-form-item class="row-item" label="船舶登记号">
            <el-input v-model="form.shipNo" class="form-item-width" :disabled="itemDisable"></el-input>
          </el-form-item>

          <el-form-item class="row-item" label="载重吨">
            <el-input v-model="form.capacity" class="form-item-width" :disabled="itemDisable"></el-input>
          </el-form-item>
          <el-form-item class="row-item" label="进出港标志">
            <el-select v-model="form.inOutType" :disabled="itemDisable" placeholder="请选择" class="form-item-width">
              <el-option v-for="(item, index) in planData.portType" :key="index" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="row-item" label="港区名称">
            <el-select v-model="form.portName" :disabled="itemDisable" placeholder="请选择" class="form-item-width" @change="onPortChange">
              <el-option v-for="(item, index) in planData.district" :key="index" :label="item"
                         :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="row-item" label="代理公司">
            <el-input v-model="form.agency" :disabled="itemDisable" class="form-item-width"></el-input>
          </el-form-item>
          <el-form-item class="row-item" label="船长(米)">
            <el-input v-model="form.shipLength" :disabled="itemDisable" class="form-item-width"></el-input>
          </el-form-item>
          <el-form-item class="row-item" label="前吃水">
            <el-input v-model="form.loadBefore" :disabled="itemDisable" class="form-item-width"
                      @input="form.loadBefore = form.loadBefore.replace(/[^\d]/g,'')"></el-input>
          </el-form-item>
          <el-form-item class="row-item" label="后吃水">
            <el-input v-model="form.loadAfter" :disabled="itemDisable" class="form-item-width"
                      @input="form.loadAfter = form.loadAfter.replace(/[^\d]/g,'')"></el-input>
          </el-form-item>

          <el-form-item class="row-item" label="货物名称">
            <el-input v-model="form.goodsName1" :disabled="itemDisable" class="form-item-width"></el-input>
          </el-form-item>
<!--          <el-form-item class="row-item" label="货物名称2">-->
<!--            <el-input v-model="form.goodsName2" :disabled="itemDisable" class="form-item-width"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item class="row-item" label="货物数量">
            <el-input v-model="form.goodsCount" :disabled="itemDisable" class="form-item-width"
                      @input="form.goodsCount = form.goodsCount.replace(/[^\d]/g,'')"></el-input>
          </el-form-item>

          <el-form-item class="row-item" label="是否危险品">
            <el-select v-model="form.dangerGoods" :disabled="itemDisable" placeholder="请选择" class="form-item-width">
              <el-option v-for="(item, index) in planData.dangerGoods" :key="index" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item class="row-item" label="靠泊泊位">
            <el-select v-model="form.arriveBerth" :disabled="itemDisable" placeholder="请选择"
                       class="form-item-width" filterable>
              <el-option v-for="(item, index) in berthArray" :key="index" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="row-item" label="计划靠泊时间">
            <el-date-picker v-model="form.berthPlanTime" :disabled="itemDisable" placeholder="选择日期时间" type="datetime"
                            class="form-item-width"></el-date-picker>
          </el-form-item>

          <el-form-item class="row-item" label="移泊泊位">
            <el-select v-model="form.moveBerth" :disabled="itemDisable" placeholder="请选择" class="form-item-width" filterable>
              <el-option v-for="(item, index) in berthArray" :key="index" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="row-item" label="计划移泊时间">
            <el-date-picker v-model="form.moveEst" :disabled="itemDisable" placeholder="选择日期时间"
                            type="datetime" class="form-item-width"></el-date-picker>
          </el-form-item>

          <el-form-item class="row-item" label="离泊泊位">
            <el-select v-model="form.leaveBerth" :disabled="itemDisable" placeholder="请选择"
                       class="form-item-width" filterable>
              <el-option v-for="(item, index) in berthArray" :key="index" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="row-item" label="计划离泊时间">
            <el-date-picker v-model="form.leaveEst" :disabled="itemDisable" placeholder="选择日期时间"
                            type="datetime" class="form-item-width"></el-date-picker>
          </el-form-item>

          <el-form-item class="row-item" label="装/卸货">
            <el-select v-model="form.loadType" :disabled="itemDisable" placeholder="请选择" class="form-item-width">
              <el-option v-for="(item, index) in planData.loading" :key="index" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item class="row-item" label="报给单位" :rules="[{ required: true, message: '请选择报给单位'}]">
            <el-select v-model="form.approvalUnit" :disabled="itemDisable" placeholder="请选择" class="form-item-width">
              <el-option v-for="(item, index) in planData.reportedUnit" :key="index" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="row-item" label="申报单位">
            <el-input v-model="form.applyUser.applyUnit" :disabled="itemDisable" class="form-item-width bgcolor-ccc"
                      disabled></el-input>
            <!--<el-select v-model="form.fullname" placeholder="请选择" class="form-item-width">
              <el-option label="进" :value="1"></el-option>
              <el-option label="出" :value="2"></el-option>
            </el-select>-->
          </el-form-item>
          <el-form-item class="row-item" label="申报人员">
            <el-input v-model="form.applyUser.applyUserName" :disabled="itemDisable" class="form-item-width bgcolor-ccc"
                      disabled></el-input>
            <!--<el-input v-model="form.fullname" class="form-item-width"></el-input>-->
          </el-form-item>
          <el-form-item class="row-item" label="国籍">
            <el-select v-model="form.country" :disabled="itemDisable" placeholder="请选择" class="form-item-width" filterable>
              <el-option v-for="(item, index) in planData.countries" :key="index" :label="item.label"
                         :value="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="row-item" label="上一港">
            <el-input v-model="form.lastPort" :disabled="itemDisable" class="form-item-width"></el-input>
          </el-form-item>

<!--          <div class="row-item"></div>-->


          <el-form-item class="big-item" label="申报备注" :rules="[{ required: true, message: '申报备注不能为空'}]">
            <el-input type="textarea" :disabled="itemDisable" :rows="4" v-model="form.remark" placeholder=""
                      class="height-300 form-text-width"></el-input>
          </el-form-item>

          <el-form-item class="big-item" label="审批意见" v-if="itemDisable">
            <el-input type="textarea" :disabled="itemDisable" :rows="4" v-model="form.approvalOpinion" placeholder=""
                      class="height-300 form-text-width"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer" v-if="!itemDisable">
      <el-button @click="toClose">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </div>
</template>

<script>
  import workPLanService from '@/services/WorkPLanService'
  import * as applyUsersService from '@/services/ApplyUsersService'
  import planData from './PlanData.js'

  export default {
    props: ['rowData', 'type'],
    name: 'PlanDetail',
    data() {
      return {
        title: '',
        form: {
          dangerGoods: '',
          shipNo: '',
          imo: '',
          inOutType: '',
          portName: '',
          agency: '',
          loadBefore: '',
          loadAfter: '',
          berth: '',
          loadType: '',
          goodsName1: '',
          goodsName2: '',
          goodsCount: '',
          berthPlanTime: '',
          planTime: '',
          currentBerth: '',
          trend: '',
          planBerth: '',
          approvalUnit: '',
          approvalOpinion: '',
          applyUser: JSON.parse(localStorage.getItem('userInfo')),
          remark: '',
          country: '',//国家
          leaveEst: '',//计划离泊时间
          moveBerth: '',//移泊泊位（代码）
          moveEst: '',//计划移泊时间
          arriveBerth: '',//靠泊泊位
          leaveBerth: '',//离泊泊位
          lastPort: '',//上一港,
          capacity: '',
          shipName: '',
          shipNameEn: '',
          createTime: '',
          shipLength: ''
        },
        berthArray: [],
        form23: '烟台海事局',
        // tableData: JSON.parse(JSON.stringify(this.rowData)),
        planData: planData,
        itemDisable: false
      }
    },
    mounted() {
      // console.log('data:::', this.rowData);
      if (this.type == 'create') {
        this.title = '作业计划申请录入'
      } else if (this.type == 'edit') {
        this.title = '作业计划申请修改'
      } else if (this.type == 'view') {
        this.title = '作业计划申请'
      }
      console.log('.......', this.form);
      // console.log(this.rowData)
      // this.showDeatil(this.rowData)
    },
    methods: {
      onPortChange(portName, clearBerth = true) {

        if (portName != null && clearBerth) {
          this.form.arriveBerth = ''
          this.form.leaveBerth = ''
          this.form.moveBerth = ''
        }
// console.log('......', keepBerth, this.form.arriveBerth)
        this.berthArray = planData.berth.filter(p => {
          return p.district === portName
        })

      },
      showDeatil(data) {

        this.clearData()

        for (let key in data) {

          if (this.type == 'edit' || this.type == 'view') {
            if (key == 'applyUser') {
              if (data[key]) {
                this.form.applyUser = data.applyUser
              } else {
                this.form.applyUser = {
                  applyUnit: "",
                  applyUser: "",
                  applyUserName: "",
                  createTime: null,
                  id: null,
                  password: "",
                  updateTime: null
                }
              }
            } else if (key !== 'updateTime') {
              this.form[key] = data[key]
              // console.log('set :' + key, this.form[key]);
            }
          }
          // }
        }
// console.log('form......', this.form);
        if (this.form.portName) {
          this.onPortChange(this.form.portName, false)
        }

        if (this.type == 'view') {
          this.itemDisable = true
        } else {
          this.itemDisable = false
        }
        // console.log('data:::', this.ship)
      },
      toClose() {
        this.$emit('close')
        setTimeout(res => {
          this.clearData()
        }, 400)
      },
      clearData() {
        this.title = ''
        this.form = {
          dangerGoods: '',
          shipName: '',
          shipNameEn: '',
          imo: '',
          shipNo: '',
          inOutType: '',
          portName: '',
          agency: '',
          shipLength: '',
          loadBefore: '',
          loadAfter: '',
          berth: '',
          loadType: '',
          goodsName1: '',
          goodsName2: '',
          goodsCount: '',
          berthPlanTime: '',
          planTime: '',
          currentBerth: '',
          trend: '',
          planBerth: '',
          approvalUnit: '',
          applyUser: JSON.parse(localStorage.getItem('userInfo')),
          remark: '',
          capacity: '',
          country: '',//国家
          moveEst: '',//计划移泊时间
          leaveEst: '',
          moveBerth: '',//移泊泊位（代码）
          arriveBerth: '',//靠泊泊位
          leaveBerth: '',//离泊泊位
          lastPort: ''//上一港,
        }
        this.form23 = '烟台海事处'
      },
      submit() {
        // let obj = this.form
        // for (let key in obj) {
        //   if ((key == 'form18' || key == 'form19') && obj[key]) {
        //     obj[key] = this.$m(obj[key]).toISOString()
        //   }
        // }

        if (!this.form.approvalUnit) {
          this.$message({
            message: '请选择申报单位！',
            type: 'warning'
          })
          return false
        } else if (!this.form.remark) {
          this.$message({
            message: '请填写申报备注！',
            type: 'warning'
          })
          return false
        }
        if (this.type == 'create') {
          applyUsersService.createPlansApplyUsers(this.form).then(res => {
            if (res.status == 201) {
              this.$message({
                message: '创建成功！',
                type: 'success'
              })
              this.toClose()
              this.$emit('update')
            }
          }).catch(resp => {
            this.$message({
              message: '创建失败！',
              type: 'error'
            })
            // this.toClose()
          })
          // 提交当前表单内容
          // workPLanService.createWorkPlans(this.form).then(res => {
          //     console.log(res)
          // }) // 提交当前表单内容
        } else if (this.type == 'edit') {
          console.log('form data::::', this.form)
          applyUsersService.editPlansApplyUsers(this.form).then(res => {
            if (res.status == 200) {
              this.$message({
                message: '修改成功！',
                type: 'success'
              })
              this.toClose()
              this.$emit('update')
            }
          }).catch(resp => {
            this.$message({
              message: '创建失败！',
              type: 'error'
            })
            this.toClose()
          })
        }
      }
    }
  }
</script>

<style scoped>
  .item-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
  }

  .big-item {
    min-width: 80%;
    flex: 1;
  }

  .row-item {
    min-width: 45%;
    flex: 1;
  }

  .detail-content {
    padding: 20px;
  }

  .dialog-footer {
    text-align: center;
    padding-bottom: 40px;
  }

  .form-item-width {
    width: 80%;
  }

  .form-text-width {
    width: 91%;
  }
</style>
